<template>
    <div class="login-page-wrapper">
  <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>东康体检APP医生端</span>
  </div>
  <el-form label-width="80px">
  <el-form-item label="医生账号">
    <el-input v-model="doctor.docCode"></el-input>
  </el-form-item>
   <el-form-item label="密码">
    <el-input v-model="doctor.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">登录</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</el-card>
</div>
</template>

<script>
import { reactive,toRefs } from 'vue';
import { setSessionStorage,getSessionStorage } from '@/common';
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';
export default {
    setup(){
        const router=useRouter()
        const state = reactive({
            doctor: {
                docCode: '',  
                password: ''
            }
        });

        function onSubmit(){
            axios
                .post('/api/doctorLogin', state.doctor)
                .then((response => {
                    let result = response.data;
                    if (result.status == 200) { 
                        //登录成功
                        //跳转到首页
                        //获取医生信息，把用户信息存入到SessionStorage，会话域，方便各个组件共享数据
                        //sessionStorage.setItem('jinandaxuedoctor', JSON.stringify(result.data)); //result.data 是一个json对象,存的要是字符串
                       setSessionStorage('jinandaxuedoctor', result.data);
                       alert(result.desc);
                        //const user = JSON.parse(sessionStorage.getItem('jinandaxueuser'));
                        //alert(result.desc);
                        router.push('/ordersList');
                    }else{
                        alert(result.desc);
                        state.doctor.docCode = '';
                        state.doctor.password = '';
                    }
                }))
                .catch(function (error) { // 请求失败处理
                    console.log(error);
                })
        }
        return {
            ...toRefs(state),
            onSubmit
        }
    }

}
</script>

<style scoped>
 /*
 * 1. 全局页面布局
 * - 使用 Flexbox 实现垂直和水平居中。
 * - 添加一个渐变背景，比单色背景更有活力。
 */
.login-page-wrapper {
   position: relative; /* 成为遮罩层伪元素的定位父级 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  
  /* --- 背景图片核心代码 --- */
  background-image: url('@/assets/images/login-bg.jpg'); /* <-- 修改为你的图片路径 */
  background-size: cover; /* 让背景图铺满整个容器 */
  background-position: center; /* 图片居中显示 */
  background-repeat: no-repeat; /* 不重复平铺 */
}
.login-page-wrapper::before {
  content: ''; /* 伪元素必需的属性 */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色，0.4代表40%不透明度，可以调整 */
  z-index: 1; /* 确保遮罩层在背景图之上 */
}

/*
 * 2. 登录卡片样式
 * - 使用 max-width 增强响应式能力。
 * - 添加圆角和精致的阴影，使其具有“浮动”感。
 * - 增加内边距，让内部元素呼吸。
 */
.box-card {
position: relative; /* 确保 z-index 生效 */
  z-index: 2; /* 比遮罩层的 z-index 高，显示在最上层 */
  width: 100%;
  max-width: 450px;
  border-radius: 12px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
  border: none;
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: rgba(255, 255, 255, 0.95); /* 让卡片也带一点透明感，与背景融合 */
}

.box-card:hover {
  transform: translateY(-5px); /* 鼠标悬浮时轻微上移 */
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.25);
}


/*
 * 3. 头部标题样式
 */
.clearfix {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #333;
  padding-bottom: 15px; /* 用 padding 代替 margin，更稳定 */
  border-bottom: 1px solid #f0f0f0; /* 添加一条细微的分割线 */
}

/*
 * 4. 表单样式
 * - 调整表单项的间距，使其更和谐。
 */
.el-form {
  margin-top: 30px; /* 标题和表单之间的距离 */
}

.el-form-item {
  margin-bottom: 25px; /* 统一表单项间距 */
}

/*
 * 5. 按钮样式
 * - 让主按钮更醒目，具有渐变色和悬浮效果。
 * - 让次要按钮更低调。
 * - 让按钮充满整个宽度，在移动端更友好。
 */
.el-button {
  width: 100%;
  border-radius: 8px; /* 按钮也使用圆角 */
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  margin-left: 0 !important; /* 覆盖Element的默认margin */
}

.el-button--primary {
  background: linear-gradient(45deg, #409eff, #79bbff);
  border: none;
}

.el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

.el-button:last-child {
  margin-top: 10px;
}

/*
 * 6. 输入框样式微调
 * - Element UI 的输入框已经很好，我们只做微调，比如聚焦时的效果。
 */
:deep(.el-input__inner) {
  border-radius: 8px;
  padding: 10px;
}

:deep(.el-input__inner:focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
</style>